<template>
  <div>
    <z-table
      :title="tableOptions.title"
      :titleHelp="tableOptions.titleHelp"
      :searchSchemas="searchSchemas"
      :tableProps="tableProps"
      :actionColumn="tableOptions.actionColumn"
      :dataSourceApi="tableOptions.dataSourceApi"
      :indexColumn="true"
      @searchSubmit="handleSearch"
    >
      <template #header="{ methods }">
        <n-button @click="() => methods.reload()">重置</n-button>
        <n-button @click="changeTitle">标题</n-button>
        <n-button @click="triggerBorder">边框</n-button>
        <n-button @click="() => toggleLoading()">Load</n-button>
      </template>
    </z-table>
  </div>
</template>

<script lang="tsx" setup>
import { ZPaginationOptions } from "@/components/Table/typings";
import { delay } from "@/utils";
import { map } from "@/utils/list";
import ZTable from "@components/Table/ZTable.vue";
import { reactive } from "vue";
import { getColumns, getSearchSchemas } from "./data";

function triggerBorder() {
  tableProps.bordered = !tableProps.bordered;
  tableProps.striped = !tableProps.striped;
}

function toggleLoading() {
  tableProps.loading = !tableProps.loading;
}

function changeTitle() {
  tableOptions.title += "!";
}

function genData(start = 0) {
  return map(50, (i) => {
    const key = start + i + 1;
    return {
      key,
      name: "John Brown " + key,
      age: (key % 10) + 20,
      address: "New York Lake Park " + key,
    };
  });
}

const demoPagination = reactive<ZPaginationOptions>({
  showSizePicker: false,
  showQuickJumper: false,
  showTotal: true,
  defaultPageSize: 5,
});

const searchSchemas = getSearchSchemas();

const tableProps: any = reactive({
  bordered: true,
  loading: false,
  striped: true,
  columns: getColumns(),
  data: genData(999),
  pagination: demoPagination,
});

const tableOptions = reactive({
  title: "表格标题",
  titleHelp: ["1. 更多详情请查看", "2. 我们的文档"],
  indexColumn: true,
  dataSourceApi: async (values: any) => {
    await delay(300);
    const res = genData(values.startIndex);
    return Promise.resolve(res);
  },
  actionColumn: {
    render({ methods }: { methods: any }) {
      return (
        <n-button text onClick={() => methods.fetchDataSource()}>
          测试
        </n-button>
      );
    },
  },
});

function handleSearch(values: any) {
  // `reload` has already been called inner `z-table`
  console.log(values);
}
</script>
